import React, { useEffect, useState } from "react"
import axios from "axios"
import { useNavigate, useParams } from "react-router-dom"
import { ProductInfo } from "../../components"
import { Header, Footer } from "../../components"
import styles from "./detail.module.css"
import { Row, Col, DatePicker, Space } from "antd"
import { productDetailSlice, getProductDetail } from "../../store/productDetail/slice"
import useSelector from "../../store/hooks"
import { useDispatch } from "react-redux"
import { MainLayout } from "../../layout/mainLayout"

const { RangePicker } = DatePicker

const DetailPage: React.FC = () => {
	// const navigator = useNavigate()
	const { id = "" } = useParams()
	// const [product, setProduct] = useState<any[]>([])

	const loading = useSelector(state => state.productDetail.loading)
	const error = useSelector(state => state.productDetail.error)
	const product = useSelector(state => state.productDetail.data)

	const dispatch = useDispatch()

	useEffect(() => {
		// axios.get(`/api/touristRoutes/${id}`).then(console.log).catch(console.log)
		// dispatch(productDetailSlice.actions.fetchStart())
		dispatch(getProductDetail(id))
	}, [])

	return (
		<MainLayout>
			<div className={styles["product-intro-anchor"]}>
				<Row>
					<Col span={13}></Col>
					<Col span={11}>
						<RangePicker open style={{ marginTop: 20 }} />
					</Col>
				</Row>
			</div>
			<Footer />
		</MainLayout>
	)
}

export default DetailPage
